<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<style>
    .father{
        width: 300px;
        height: 300px;
        background-color: pink;
       
    }
    .sun{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <!-- 姓名处，可以去除多余的空格 -->
    <!-- 年龄处，数字则age转为number类型，否则string，可以判断用户是否输入错误 -->
    <div id="app">
     姓名：<input type="text" v-model.trim="name"><br><br>
     年龄：<input type="text" v-model.number="age">
    <!-- 阻止冒泡，点击子类，父类也被点击 -->
     <div class="father" @click="fa()">
        father
        <div class="sun" @click.stop="su()">
            sun
        </div>
    </div>
    <!-- 阻止默认行为 @事件名.prevent -->
    <a @click.prevent href="https://cn.bing.com/?mkt=zh-CN&mkt=zh-CN">bing</a>
</div>

    
</body>
<script>
   const app=new Vue({
    el:'#app',
    data:{
        name:"",
        age:'',
    },
    methods: {
        fa(){
            window.alert("father")
        },
        su(){
            window.alert("sun")

        }
    }
   })
</script>
</html>